<template>
  <div class="capital">
    <header class="capital-header">
      <BaseSearch :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
      <el-button size="small" type="primary" @click="addOrEdit()" v-if="isCanAdd">添加</el-button>
    </header>
    <BaseTable :columns="columns" v-bind="table">
      <template slot-scope="scope" slot="logo">
        <img :src="scope.row.logo" alt="暂无图片" />
      </template>
      <template slot-scope="scope" slot="longLogo">
        <img :src="scope.row.longLogo" alt="暂无图片" />
      </template>
    </BaseTable>
    <AddEditPop ref="AddEditPop" @popClose="popClose"></AddEditPop>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import { STATUS, STATUS_LIST } from '@/constants/baseModel.js'
import AddEditPop from '../components/AddEditPop.vue'

const service = async params => {
  const { records, total } = await http.get('/funds', {
    params: params,
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'capitalManagementList',
  components: {
    BaseSearch,
    BaseTable,
    AddEditPop,
  },
  mixins: [FormTableMixin(service)],
  data() {
    const isCanEdit = this.$checkAccess('MENU_CAPITALT_MANAGEMENT_EDIT')
    const isCanEnableDisable = this.$checkAccess('MENU_CAPITALT_MANAGEMENT_ENABLE_DISABLE')

    return {
      searchConfig: [
        { component: 'input', prop: 'fundName', label: '资方名称', placeholder: '资方名称' },
        {
          component: 'select',
          prop: 'status',
          label: '资方状态',
          value: '',
          options: STATUS_LIST,
        },
      ],
      columns: [
        { label: '资方名称', prop: 'name' },
        { label: '资方编码', prop: 'code' },
        {
          label: '资方LOGO',
          prop: 'logo',
        },
        { label: '资方长LOGO', prop: 'longLogo' },
        {
          label: '状态',
          prop: 'status',
          render: (value, row) => {
            return <span>{STATUS[row.status]}</span>
          },
        },
        {
          label: '操作',
          render: (value, row) => {
            return (
              <div>
                {isCanEdit && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.addOrEdit(row)
                    }}>
                    编辑
                  </el-button>
                )}

                {isCanEnableDisable && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.openOrDisable(row)
                    }}>
                    {row.status === '0' ? '启用' : '禁用'}
                  </el-button>
                )}
              </div>
            )
          },
        },
      ],
    }
  },
  computed: {
    isCanAdd() {
      return this.$checkAccess('MENU_CAPITALT_MANAGEMENT_ADD')
    },
  },
  methods: {
    addOrEdit(item) {
      this.$refs.AddEditPop.show(item)
    },
    async openOrDisable(item) {
      if (item && item.status === '1') {
        const action = await this.confirmBox(
          '资方禁用后企业将无法对该资方下产品进行授信、支用操作，是否确认禁用？',
          '确认禁用？'
        )
        console.log(action)
        action && (await this.openOrDisableRequest(item.id, item.status))
        return
      }
      const action = await this.confirmBox('', '确认启用？')
      console.log(action)
      action && (await this.openOrDisableRequest(item.id, item.status))
    },
    async confirmBox(subTitle, title) {
      return await this.$confirm(subTitle, title, { confirmButtonText: '保存', cancelButtonText: '取消' })
    },
    async openOrDisableRequest(id, status) {
      const state = status === '0' ? '1' : '0'
      await this.$http.put(`/funds/${id}/update_status`, { status: state })
      this.$refs.search.$refs.searchForm.resetFields()
      this.form.onSubmit()
    },
    popClose(val) {
      if (val) {
        this.$refs.search.$refs.searchForm.resetFields()
        this.form.onSubmit()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
